<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>fullPage - Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="fullPage:For desktop(ie5.5+) or mobile webApp without jQuery,create full screen pages fast and simple.">
    <meta name="keywords" content="fullPage,webApp,full screen">
    <meta name="author" content="Chriswang,396276123@qq.com">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="jquery.min.js"></script>
</head>
<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!-->

<body>
    <!--<![endif]-->
    <div class="nav">
        <h1>
            <a href="https://github.com/powy1993/fullpage">
                <img src="images/logo.jpg" class="logo" alt="">
                <p>fullPage - Github:https://github.com/powy1993</p>
                <span>Fork me on Github!</span>
            </a>
        </h1>
        <ul>
            <li data-menuanchor="firstPage"><a href="#firstPage">ABOUT</a></li>
            <li data-menuanchor="secondPage"><a href="#secondPage">VIEW</a></li>
            <li data-menuanchor="thirdPage"><a href="#thirdPage">CASE</a></li>
            <li data-menuanchor="fourthPage"><a href="#fourthPage">SERVICE</a></li>
            <li data-menuanchor="lastPage"><a href="#lastPage">HOME</a></li>
        </ul>
    </div>
    <div id="article">

        <div class="page section1 current">
            <div class="contain">
                <div id="pageContain">

                    <div class="page page1 current">
                        <div class="contain">
                            <h3 class="title">整屏切换组件</h3>
                            <h4 class="titleEng">fullPage</h4>
                            <img src="images/a2.png" alt="HTML,CSS" class="page1-box">
                            <p>使用CSS3动画以及降级处理，兼容到ie6。</p>
                        </div>
                    </div>

                    <div class="page page2">
                        <div class="contain">
                            <h3 class="title">这是轮播第二部分</h3>
                            <h4 class="titleEng">This is 1-2</h4>
                            <img src="images/a10.png" alt="可视化数据" class="page2-box">
                        </div>
                    </div>

                    <div class="page page3">
                        <div class="contain">
                            <h3 class="title">可以随意地添加动画</h3>
                            <h4 class="titleEng">could use animation(CSS3)</h4>
                            <img src="images/a13.png" alt="影视制作" class="page3-box">
                        </div>
                        <div class="scTop"></div>
                        <div class="scBottom"></div>
                    </div>

                    <div class="page page4">
                        <div class="contain">
                            <h3 class="title">支持手机端触摸</h3>
                            <h4 class="titleEng">Touch it!</h4>
                            <div class="page4-box">
                                <img src="images/a5.png" alt="微信">
                            </div>
                        </div>
                    </div>
                </div>
                <ul id="navBar">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

                <div id="prev">&lt;</div>
                <div id="next">&gt;</div>
            </div>
        </div>

        <div class="page section2">
            <div class="contain">
                <h3 class="title">这里是第二竖屏</h3>
                <h4 class="titleEng">This is section2</h4>
            </div>
        </div>

        <div class="page section3">
            <div class="contain">
                <h3 class="title">这里是第三竖屏</h3>
                <h4 class="titleEng">This is section3</h4>
            </div>
        </div>

        <div class="page section4">
            <div class="contain">
                <h3 class="title">这里是第四竖屏</h3>
                <h4 class="titleEng">This is section4</h4>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/fullPage.min.js"></script>
    <script type="text/javascript">
        var runPage,
            runPage2,
            interval,
            autoPlay;

        autoPlay = function(to) {

            clearTimeout(interval);
            interval = setTimeout(function() {
                runPage.go(to);
            }, 5000);

        }

        runPage = new FullPage({

            id: 'pageContain', // id of contain
            slideTime: 1000, // time of slide
            effect: { // slide effect
                transform: {
                    translate: 'X', // 'X'|'Y'|'XY'|'none'
                    scale: [0, 1], // [scalefrom, scaleto]
                    rotate: [60, 0] // [rotatefrom, rotateto]
                },
                opacity: [0, 1] // [opacityfrom, opacityto]
            },
            mode: 'touch,nav:navBar', // mode of fullpage
            easing: [0, .93, .39, .98], // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
            callback: function(index, thisPage) { // callback when pageChange

                index = index + 1 > 3 ? 0 : index + 1;
                autoPlay(index);
            }
        });

        runSection = new FullPage({

            id: 'article', // id of contain
            slideTime: 800, // time of slide
            effect: { // slide effect
                transform: {
                    translate: 'Y', // 'X'|'Y'|'XY'|'none'
                    scale: [0, 1], // [scalefrom, scaleto]
                    rotate: [360, 0] // [rotatefrom, rotateto]
                },
                opacity: [0, 1] // [opacityfrom, opacityto]
            },
            mode: 'touch,wheel', // mode of fullpage
            easing: [0, .93, .39, .98],
            callback: function(index, thisPage) { // callback when pageChange

                if (index === 0) {
                    autoPlay(runPage.thisPage() + 1);
                } else {
                    clearTimeout(interval);
                }
            }
        });

        interval = setTimeout(function() {
            runPage.go(runPage.thisPage() + 1);
        }, 5000);
    </script>

    <script type="text/javascript">
        var prev = document.getElementById('prev'),
            next = document.getElementById('next');

        prev.onclick = function() {
            runPage.go(runPage.thisPage() - 1);
        }
        next.onclick = function() {
            runPage.go(runPage.thisPage() + 1);
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                paddingTop: '50px',
                anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
                menu: '#myMenu'
            });
        });
    </script>

    <!--[if lte IE 6]>
	<script type="text/javascript" src="http://mat1.gtimg.com/cd/201108/app/DD_belatedPNG_0.0.8a.js" charset="utf-8"></script>
	<script type="text/javascript">
	DD_belatedPNG.fix("*");
	</script>
	<![endif]-->

</body>

</html>